// 新增或者编辑
<template>
  <el-dialog
    v-if="showDialog"
    :title="processing"
    :visible="showDialog"
    width="20%"
    @close="banFollow"
  >
    <el-form ref="jectName" :rules="rules" label-width="80px" :model="fromSubject">
      <el-form-item prop="subjectName" label="学科名称">
        <el-input v-model="fromSubject.subjectName" placeholder="请输入学科名称" />
      </el-form-item>
      <el-form-item label="是否显示">
        <el-switch
          v-model="fromSubject.isFrontDisplay"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="banFollow">取 消</el-button>
      <el-button type="primary" @click="btnOK">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 接口
import { add, update } from '@/api/hmmm/subjects'
export default {
  // 组件名称
  name: 'Theneweditor',
  // 接受父组件传递的值
  props: {
    // 控制弹框
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 表单数据
      fromSubject: {
        subjectName: '', // 学科名称
        isFrontDisplay: 1
      },
      // 表单验证
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }

        ]
      }
    }
  },
  // 控制头部title标签
  computed: {
    processing() {
      return this.fromSubject.id ? '编辑学科' : '新增学科'
    }
  },
  methods: {
    // 控制弹框
    banFollow() {
      this.$emit('update:showDialog', false)
      this.fromSubject = {
        subjectName: '', // 学科名称
        isFrontDisplay: 0,
        id: ''
      }
    },
    async btnOK() {
      try {
        this.$refs.jectName.validate()
        if (this.fromSubject.id) {
          // 2222
          await update(this.fromSubject)
        } else {
          await add(this.fromSubject)
        }
        this.banFollow()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style>

</style>
